<template v-cloak>
  <view style="margin: 20upx">
    <view class="article-list">
      <view
        class="item"
        v-for="(v, i) in articleAllList"
        :key="v.id"
        @click="HandleView(v.id)"
        ><view class="a-title t1">
          {{ v.title }}
        </view>
        <view class="nav-item">
          <view
            class="cover br10"
            :style="{ backgroundImage: 'url(' + v.cover + ')' }"
          ></view>
          <view class="info">
            <view class="title t2"> {{ v.content }} </view>
            <view class="tag-list flex">
              <!--            <text
                class="tag"
                v-for="(item, index) in v.label_list"
                :key="index"
                >{{ item.title }}</text
              > -->
              <view
                class="padding-md"
                v-for="(item, index) in v.label_list"
                :key="index"
              >
                <view class="cu-tag sm light bg-purple">{{ item.title }}</view>
              </view>
            </view>
            <view class="tag-time flex-between">
              <view class="eye"> {{ v.view_num }}阅读 </view>

              <view class="time"> {{ v.create_at }} </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-back-top
      :scrollTop="scrollTop"
      bottom="40"
      :custom-style="{ background: 'transparent' }"
    >
      <view class="back-top-image">
        <image src="/static/icon/icon-back-top.png" mode="widthFix"></image>
      </view>
    </u-back-top>
    <view v-if="!isGet && articleAllList.length" class="no-more">
      <u-loadmore font-size="24" :status="status" :load-text="loadText"
    /></view>
    <ALoading v-show="aloading"></ALoading>
    <view :class="{ mask: aloading }" :catchtouchmove="aloading"></view>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import ALoading from "../../../components/loading/loading.vue"
export default {
  components: { ALoading },
  data() {
    return {
      status: "loadmore",
      aloading: true,
      loadText: {
        loadmore: "用力往上拉",
        loading: "正在加载，请喝杯茶...",
        nomore: "我也是有底线的",
      },
      isGet: false,
      pages: 1, //页码
      pageSize: 8, //每页条数
      dataCount: 0, //总条数
      scrollTop: 0,
      articleAllList: [],
    }
  },
  onLoad() {
    this.GetArticleAllList()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onReachBottom() {
    // 判断条件  页码 * 每页条数 < 总条数
    var isGet = (this.pages - 1) * this.pageSize < this.dataCount
    if (isGet) {
      // 触发数据加载
      this.GetArticleAllList("nextpage")
    }
  },
  methods: {
    GetArticleAllList(type) {
      let _self = this
      if (type != "nextpage") {
        _self.pages = 1
        _self.articleAllList = []
      }
      let data = {
        page_index: _self.pages++,
        page_size: _self.pageSize,
        status: 1,
      }
      _self.$store.dispatch("article/list", data).then(res => {
        // _self.articleAllList = res.data
        if (type == "nextpage") {
          _self.articleAllList = _self.articleAllList.concat(res.data)
        } else {
          _self.articleAllList = res.data
        }
        _self.dataCount = res.data_count
        _self.status = "nomore"
        _self.aloading = false
      })
    },
    HandleView(id) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id,
      })
    },
  },
}
</script>

<style></style>
